<html>
<head>
<meta charset="utf-8">
<title>hxt ajax test demo(runoob.com)</title>
<style>
	span { display:block; width: 150px; float:left;text-align:center;}
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
<!-- 添加你的js 代码-->
	$(document).ready(function(){
		$(".result").hide();	
		$("button").click(function(){	
				
				idnum=$("input").val();
				
				$.ajax({
				 type:"get",
                 url:"server/getdata.do",
                 dataType:"html",
				 data: {id : idnum},
				 success:function(data,status){
						
						 	htm="</br><li style=\"list-style-type:none;\">";
							htm+=data;
							alert(data+":"+status);
							htm+="</li>";
							$("ul").append(htm);
							$(".result").show();
					
						}
					});
			
				
			});
	});
</script>
</head>
<body>
<!-- 添加html标签-->
	<div>
		<p>
		<label>查询编号</label>
		<input type="text"></input>
	    <button>查询</button>	
		</p>
	 </div>
	<div class="result">
		<h4>查询结果</h4>
			<ul border="1">
				<li style="list-style-type:none;">
					<span>编号</span>
					<span>姓名</span>
					<span>信件分类</span>
					<span>标题</span>
				</li>
			</ul>
	</div>
</body>
</html>